<template>
  <el-container>
    <el-container>
      <el-aside width="210px">
        <el-row style="width: 190px;">
          <el-col :span="24" style="background-color: #019BA0;width:200px;height: 35px;text-align:auto;color: #FFFFFF;"><div class="grid-content" style="text-align: left;font-size: 24px;">基础设施目录</div></el-col>
          <el-col :span="24" style="background-color: #019BA0;width:200px;height: 35px;text-align:auto;color: #FFFFFF;">
            <div class="grid-content" style="text-align:right;font-size: 24px;"><el-button type="primary" @click="newAdd">新 增</el-button></div>
          </el-col>
          <el-col :span="12">
            <el-menu
              :default-active="this.$route.path"
              class="el-menu-vertical-demo"
              background-color="#ffffff"
              text-color="#000000"
              active-text-color="#ffffff"
              router>
              <el-submenu :index="menu1.id+''" v-for="menu1 in menu" :key="menu1.id">
                <template slot="title">

                  <span style="color: #019BA0;font-weight: bolder;font-size:18px;"><i class="el-icon-school"></i>{{menu1.name}}</span>
                </template>
                <el-submenu :index="'/property/'+menu2.id" v-for="menu2 in menu1.childrenBase" :key="menu2.id">
                          <template slot="title">
                            <span style="color: #4d96d6;font-weight: bolder;font-size:14px;"><i class="el-icon-set-up"></i>{{menu2.name}}</span>
                          </template>
                          <el-menu-item :index="'/property/'+menu3.id" v-for="menu3 in menu2.childrenBase" :key="menu3.id">
                            <span>{{menu3.name}}</span>
                          </el-menu-item>
                </el-submenu>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-row>

        <!--添加框 -->
        <el-dialog  title="添加设施" :visible.sync="addVisible" :closeOnClickModal='false' :show-close='false'>
            <el-form  :model="baseType" :rules="rules" ref="ruleForm">
            <el-row>
                <el-col :span="24">
                <el-form-item label="设施编号" label-width="80px" style="text-align: left;">
                   <el-cascader style="width:400px;"
                       :options="options"
                       :props="defaultParams"
                       @change="handlerChange"
                       clearable>
                   </el-cascader>
                </el-form-item>
            </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                  <el-form-item label="新增名称" label-width="80px" prop="name">
                     <el-input v-model="baseType.name" placeholder="请输入新增名称"></el-input>
                  </el-form-item>
              </el-col>
              <el-col :span="10">
                  <el-form-item label="投入使用时间" label-width="130px" prop="useTime">
                     <el-date-picker
                         v-model="baseType.useTime"
                         type="date"
                         placeholder="选择日期">
                     </el-date-picker>
                  </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5">
                  <el-form-item label="经度" label-width="80px" prop="longitude">
                     <el-input v-model="baseType.longitude" placeholder="请输入经度"></el-input>
                  </el-form-item>
              </el-col>
              <el-col :span="5">
                  <el-form-item label="纬度" label-width="80px" prop="latitude">
                     <el-input v-model="baseType.latitude" placeholder="请输入纬度"></el-input>
                  </el-form-item>
              </el-col>
              <el-col :span="14">
                  <el-form-item label="地址" label-width="80px" prop="address">
                     <el-input v-model="baseType.address" placeholder="请输入设施地址"></el-input>
                  </el-form-item>
              </el-col>
            </el-row>
             <el-row>
                <el-col :span="24">
                    <el-form-item label="描述" label-width="80px" prop="describe">
                        <el-input type="textarea" v-model="baseType.describe" placeholder="请输入描述"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false;closeForm('ruleForm')">关 闭</el-button>
                <el-button type="primary" @click="doAdd('ruleForm')">添加</el-button>
            </div>
        </el-dialog>

      </el-aside>
      <el-main>
          <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  export default {
    data(){
      return{
         menu:[],
         addVisible:false,
         options:[],
         defaultParams: {
                  value: 'id',
                  label: 'name',
                  children: 'childrenBase'
         },
         baseType: {
           name:'',
           longitude: '',
           latitude: '',
           useTime:'',
           address:'',
           describe:''
         },
         rules:{
           name: [{
             required: true,
             message: '不能为空',
             trigger: 'blur'
           }],
           longitude: [{
             required: true,
             message: '不能为空',
             trigger: 'blur'
           },{
                 pattern:'^[0-9]+([.]{1}[0-9]+){0,5}$',
                 message: '不是数字',
                 trigger: 'blur'
               }],
           latitude: [{
             required: true,
             message: '不能为空',
             trigger: 'blur'
           },{
                 pattern:'^[0-9]+([.]{1}[0-9]+){0,5}$',
                 message: '不是数字',
                 trigger: 'blur'
               }],
           useTime: [{
             required: true,
             message: '不能为空',
             trigger: 'blur'
           }],
           address: [{
             required: true,
             message: '不能为空',
             trigger: 'blur'
           }],
           describe: [{
             required: true,
             message: '不能为空',
             trigger: 'blur'
           }],
         },
         oneId:'',
         twoId:'',

      }
    },
    methods: {
        getBasePermAll(){
          this.axios.get("/base/allBase").then(res=>{
            this.menu=res.data.data;
          })
        },
        newAdd(){
            this.axios.get("/base/twoBase").then(res=>{
              this.options=res.data.data;
              this. addVisible=true;
            })
        },
        doAdd(ruleForm){
            this.$refs[ruleForm].validate((valid) => {
                if (valid && this.oneId!='') {
                     this.axios.post("/base/addChildBase?twoId="+this.twoId,this.baseType).then(res=>{
                          if(res.data.code==200){
                            this.addVisible=false;
                            this.getBasePermAll();
                            this.oneId='';
                            this.twoId='';
                            this.sucMsg("添加成功")
                          }
                     })


                }else{
                     this.errorMsg("请选择设施编号!");
                   }
            })
        },
        handlerChange(item) {
          this.oneId='';
          this.twoId='';
          this.oneId=item[0];
          this.twoId=item[1];
        },
        closeForm(ruleForm) {
          this.$refs[ruleForm].resetFields();
          this.clear();
        },
        clear(){
          this.baseType.name='';
          this.baseType.longitude='';
          this.baseType.latitude='';
          this.baseType.useTime='';
          this.baseType.address='';
          this.baseType.describe='';

        },
        sucMsg(msg) {
              this.$message({
                message: msg,
                offset:150,
                duration:1000,
                type: 'success'
              });
        },
        errorMsg(msg) {
            this.$message.error({
              message: msg,
              offset:150,
              duration:1000
            });
        }

    },
    created(){
       this.getBasePermAll();
    }
  }
</script>

<style scoped="scoped">

  .el-container {
    margin: 0;
    padding: 0;
    margin-top:5px;
    margin-left: 5px;
    width:1300px;
    height:640px;
  }
  .el-aside {
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    border:5px solid #F3F3F3;
    text-align: center;
  }

  .el-main {
    margin: 0;
    padding: 0;
    margin-left:3px;
    border:5px solid #F3F3F3;
    background-color: #ffffff;
    color: #333;
  }

  .el-submenu{
    width:200px;
    text-align: left
  }
  .el-menu-item.is-active {
      background-color: #019BA0 !important;
      color: #fff;
      span {
        color: #fff !important;
      }
  }
 .el-menu-item{
    text-align: right !important;
  }

</style>
